<template>
  <div class="Certificate relative">
    <div class="absolute top-0 right-0">
      <el-button type="primary" @click="handleRegionSave('people_info')"
        >保存备注</el-button
      >
    </div>
    <el-tabs v-model="activeName" type="card" class="w-full">
      <el-tab-pane
        :label="item.label"
        :name="item.value"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <vxe-table
          border
          show-overflow
          :data="tableData1"
          :column-config="{ resizable: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
        >
          <vxe-column type="seq" title="序号" width="60"></vxe-column>
          <vxe-column
            field="nickname"
            title="文件名称"
            :edit-render="{ placeholder: '请输入文件名称' }"
            width="300"
          >
            <template #edit="{ row }">
              <vxe-input v-model="row.nickname" placeholder="请输入文件名称"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column
            field="nickname"
            title="备注说明"
            :edit-render="{ placeholder: '请输入备注说明' }"
          >
            <template #edit="{ row }">
              <vxe-input v-model="row.nickname" placeholder="请输入备注说明"></vxe-input>
            </template>
          </vxe-column>
        </vxe-table>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" class="absolute right-0 top-1">附件上传</el-button>
  </div>
</template>

<script setup name="Certificate">
const activeName = ref("1");
const tabs = reactive([
  {
    label: "产品规格书(PDR)",
    value: "1",
  },
  {
    label: "认证证书",
    value: "2",
  },
  {
    label: "样品检测报告",
    value: "3",
  },
  {
    label: "产品丝印",
    value: "4",
  },
  {
    label: "产品包装图",
    value: "2",
  },
  {
    label: "产品说明书",
    value: "3",
  },
  {
    label: "其他",
    value: "4",
  },
]);
const tableData1 = ref([
  {
    id: 10001,
    name: "",
    nickname: "T1",
    role: "Develop",
    sex: "",
    sex2: ["0"],
    num1: 40,
    age: 28,
    address: "Shenzhen",
    date12: "",
    date13: "",
  },
  {
    id: 10002,
    name: "Test2",
    nickname: "T2",
    role: "Designer",
    sex: "1",
    sex2: ["0", "1"],
    num1: 44,
    age: 22,
    address: "Guangzhou",
    date12: "",
    date13: "2020-08-20",
  },
  {
    id: 10003,
    name: "",
    nickname: "T3",
    role: "",
    sex: "0",
    sex2: ["1"],
    num1: 200,
    age: 32,
    address: "Shanghai",
    date12: "2020-09-10",
    date13: "",
  },
]);
</script>

<style lang="scss" scoped></style>
